<template>
  <!--  表格：装主体数据   -->
  <div>
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="Shop" :rules="rules" ref="sbuinessForm" label-width="120px">
        <!-- ... 其他表单项 ... -->
        <el-form-item label="用户id" prop="sid" :rules="[{ required: true, message: '商铺编码不能为空', trigger: 'blur' }]">
          <el-input v-model="Shop.sid" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="用户账号" prop="sname" :rules="[{ required: true, message: '商铺编码不能为空', trigger: 'blur' }]">
          <el-input v-model="Shop.sname" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="spassword" :rules="[{ required: true, message: '商铺编码不能为空', trigger: 'blur' }]">
          <el-input v-model="Shop.spassword" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="siphone" :rules="[{ required: true, message: '商铺编码不能为空', trigger: 'blur' }]">
          <el-input v-model="Shop.siphone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户头像" prop="src">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:9092/file/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="Shop.src" :src="Shop.src" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSubmitss">取 消</el-button>
        <el-button type="primary"  @click="submitForms">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style>
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.table-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.button-container {
  margin-bottom: 10px;
  padding-left: 0;/* 根据需要调整间距 */
}
</style>
<script>
import request from "@/utils/request";
import {removeToken} from "@/utils/auth";

export default {
  data() {
    return {
      Shop: {
        sid: 0,
        sname: '',
        spassword: '',
        siphone: '',
        src: '',
      },
      dialogFormVisible: false
    }
  },
  methods: {
    getToken(){
      request({
        method: 'post',
        url: 'http://localhost:9092/shops/getTook',
      }).then(res => {
        if (res.data.code === 200) {
          this.Shop = res.data.data;
          this.shopsName = res.data.data.sname
          this.Shop.sname = this.shopsName;
        }
      })
    },
    cancelSubmitss(){
      window.location.reload(true)
    },
    submitForms(){
      console.log(this.Shop)
      this.$confirm('此操作将永久修改该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          method: 'post',
          url: 'http://localhost:9092/shops/updateShop',
          data: this.Shop,
        }).then(res => {
          if (res.data.code===200) {
            this.$message({
              type: 'success',
              message: res.data.msg
            });
            this.dialogFormVisible = false;
            removeToken();
            this.$router.replace('/');
            window.location.reload(true);
          }else {
            this.$message({
              type: 'error',
              message: res.data.msg
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });
    },
    handleAvatarSuccess(res) {
      this.Shop.src = res.data;
    },
    beforeAvatarUpload(file) {
      // 检查文件类型是否为 JPG, PNG 或 WebP
      const isJPGorPNGorWebP = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/webp';
      const isLt2M = file.size / 1024 / 1024 < 2; // 检查文件大小是否小于 2MB

      if (!isJPGorPNGorWebP) {
        this.$message.error('上传头像图片只能是 JPG, PNG 或 WebP 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPGorPNGorWebP && isLt2M;
    },
  },
  created() {
    this.dialogFormVisible = true
    this.getToken()
  }
}
</script>